<template>
  <div class="page-box">
    <!-- <h3>{{pageTitle}}</h3> -->
    <h3>{{pageTitle}}</h3>
    <hr>
    <div class="content-box">
      <QueryForm
        ref="queryForm"
        @handleQuery="query"
        @handleAddConfig="handleAddConfig" 
      />
      <CustomTable
        ref="customTable"
        :columns="columns"
        :tableData="tableData"
      >
      <template>
        <!-- 在已有列后面添加列 -->
          <el-table-column
            label="操作"
            align="center"
            width="200"
            fixed="right"
          >
            <template slot-scope="scope">
              <span type="primary" class="operate-btn" @click="handleDetail(scope.row)">查看</span>
              <span type="primary" class="operate-btn" @click="handleModify(scope.row)">修改</span>
              <span type="primary" class="operate-btn" @click="handleGenerate(scope.row)">生成报表</span>
              <span type="primary" class="operate-del-btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </template>
      </CustomTable>
        <div class="table-footer">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
    </div>

    <!-- 
      :pagination="pagination"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
     -->

     <!-- 新增报表方案 -->
     <ReportConfig
      ref="reportConfig"
     ></ReportConfig>
  </div>
</template>

<script>
import QueryForm from './QueryForm.vue';
import CustomTable from '../../components/CustomTable.vue';
import { tableColumns } from './tableColumns.js';
import ReportConfig from './reportConfig';

export default {
  components: {
    QueryForm,
    CustomTable,
    ReportConfig,
  },
  data() {
    return {
      pageTitle: '',
      tableData: [{}],
      columns: tableColumns,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizes: [10, 20, 50, 100],
    }
  },
  created() {
    this.pageTitle = this.$route.meta.title
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.query(); // 重新查询 
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.query(); // 重新查询 
    },
    query() {
      const formParams = this.$refs.queryForm.getParams()
      this.$refs.customTable.getTableData(formParams)
    },
    // 生成报表
    handleGenerate(row) {
      console.log(row)
    },
    handleDetail(row) {
      console.log(row)
      this.$refs.reportConfig.handleOpen({
        operateType: "view",
        row
      })
    },
    handleAddConfig() {
      this.$refs.reportConfig.handleOpen({
        operateType: "Add",
        row: {}
      })
    },
    handleModify(row) {
      console.log(row)
      this.$refs.reportConfig.handleOpen({
        operateType: "Modify",
        row
      })
    },
    handleDelete(row) {
      console.log(row)
      const params = { id: row.id}
    },

  }
}
</script>


<style lang="scss" scoped>
@import '@/assets/styles/newBase.scss';
  .page-box {
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    .content-box {
      padding: 10px 15px;
    }
  }

</style>
